<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-22 13:13:43
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-25 14:11:30
 * @FilePath: \app-formwork\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="seek">
    <view class="seek_detail flex column">
      <!-- 头部 -->
      <view class="tittle flex items " style="width: 100%">
        <view style="display: inline-block;flex: 1;">{{ forumDetailList.title }}</view>
        <view class="sc" style="width: 48rpx; height: 48rpx">
          <image src="../../assets/images/onsc.png" v-if="forumDetailList.is_collect == 1" @click="myShoucangEdit" />
          <image
            src="../../assets/images/sc.png"
            v-if="forumDetailList.is_collect == 0"
            alt=""
            @click="myShoucangEdit"
          />
        </view>
      </view>
      <!-- 展位符 -->
      <!-- <view style="height: 44rpx;"></view> -->

      <!-- 标签 -->
      <view class="tips flex items justify-center cloumn">
        <view v-for="(item, index) in forumDetailList.tag" :key="index" style="margin: 0 15rpx">#&nbsp;{{ item }}</view>
      </view>
      <!-- 照片 -->
      <view class="photos">
        <image :src="item" alt="" v-for="(item, index) in forumDetailList.images" :key="index" />
      </view>
      <!-- 文字内容 -->
      <view class="textInfo">
        <view class="contentList" ref="sectionRef" :class="openMpreShow == 1 ? 'ellipsis-8 oncontentList' : ''">
          {{ forumDetailList.descript }}
        </view>
        <view class="moreComment flex items" style="height: 100%" v-if="luntanText">
          <view class="flex" v-if="openMpreShow == 1" @click="openAnd()"
            >{{ openMore }}<u-icon name="arrow-down" color="#306eff" size="14"></u-icon
          ></view>
          <view class="flex" v-if="openMpreShow == 2" @click="clouseAnd()"
            >{{ openMore }}<u-icon name="arrow-up" color="#306eff" size="14"></u-icon
          ></view>
        </view>
      </view>
      <!-- 学生时代里，因为不懂什么是利益交换，不懂什么是社会的黑暗，也不知道有一天我们会形同陌路。那时候我会很开心的过每一天，看一场搞笑的电影会笑半天，有心事会和自己身边的人说，遇到伤心事学生时代里，因为不懂什么是利益交换，不懂什么是社会的黑暗，也不知道有一天我们会形同陌路。那时候我会很开心的 -->
      <!-- 发表 -->
      <view class="publishTime flex items">
        <span>发表于：{{ forumDetailList.createtime }}</span>
      </view>
      <!-- 发布人信息 -->
      <view class="publishinfo flex column">
        <view class="publishinfo_top flex items justify-between">
          <view class="publish_left">
            <image :src="forumDetailList.author_avatar" alt="" />
            <span>{{ forumDetailList.author_nickname }}</span>
          </view>
          <view v-if="Number(uuid) != Number(forumDetailList.user_id)">
            <view class="publish_right" v-if="forumDetailList.is_follow == 1" @click="myFocus">已关注 </view>

            <view class="publish_right_no" v-if="forumDetailList.is_follow == 0" @click="myFocus">未关注 </view>
          </view>
        </view>
        <view class="publishinfo_bottom flex items justify-between">
          <view class="publish_left">
            <image src="../../assets/images/eye2.png" alt="" />
            <span>{{ forumDetailList.see_num }}</span>
          </view>
          <view class="publish_left" @click="myCancelgoodList">
            <image src="../../assets/images/oneye.png" v-if="forumDetailList.is_goods == 1" />
            <image src="../../assets/images/eye2x.png" alt="" v-if="forumDetailList.is_goods == 0" />
            <!-- <image src="../../assets/images/ax2.png" alt="" @click="myCancelgoodList" /> -->
            <span>{{ forumDetailList.goods_num }}</span>
          </view>
        </view>
      </view>
    </view>
    <!-- 评论部分 -->
    <view class="comment">评论列表 </view>
    <!-- 评论 -->
    <!-- 有回复 -->
    <view v-if="totalListData.length > 0">
      <view class="comment_list flex column" v-for="(item, index) in totalListData" :key="index">
        <!-- 帖子头部信息 -->
        <view class="publishinfo_top flex items justify-between">
          <view class="publish_left">
            <image :src="item.avatar" alt="" />
            <span>{{ item.nickname }}</span>
          </view>
          <view class="publish_right">{{ item.createtime }} </view>
        </view>
        <!-- 帖子内容 -->
        <!-- 一级评论 -->
        <view class="comment_text_info">
          <view class="comment_text">{{ item.msg }}</view>
          <view class="comment_ansoner flex items justify-between">
            <view class="huifu" @click="reply(item.id, 1)">回复</view>
            <view class="dianzan flex items" @click="myCancelgoods(item.id, 1)">
              <image src="../../assets/images/oneye.png" v-if="item.is_goods == 1" />
              <image src="../../assets/images/eye2x.png" alt="" v-else />
              <span style="margin-left: 12rpx; display: inline-block">{{ item.goods_num }}</span>
            </view>
          </view>
        </view>
        <!-- 二级评论回复的内容 -->

        <view v-for="(jitem, jindex) in item.son" :key="jindex">
          <view class="publishinfo_top replay flex items justify-between">
            <view class="publish_left">
              <image :src="jitem.avatar" alt="" />
              <span style="margin-left: 12rpx; display: inline-block">{{ jitem.nickname }}</span>
            </view>
            <view class="publish_right">{{ jitem.createtime }} </view>
          </view>
          <view class="comment_text_info">
            <view class="comment_text">{{ jitem.msg }}</view>
            <view class="comment_ansoner flex items justify-between">
              <view></view>
              <!-- <view class="huifu" @click="replyTwo(jitem.id)">回复</view>  -->
              <view class="dianzan flex items" @click="myCancelgoods(jitem.id, 2)">
                <image src="../../assets/images/oneye.png" v-if="jitem.is_goods == 1" />
                <image src="../../assets/images/eye2x.png" alt="" v-else />
                <span style="margin-left: 12rpx; display: inline-block">{{ jitem.goods_num }}</span>
              </view>
            </view>
          </view>
        </view>
        <view
          class="moreComment flex items"
          v-if="item.son.length >= 1 && !item.fold"
          style="height: 100%"
          @click="getMoreComemnt(item.id)"
        >
          展示更多内容<u-icon name="arrow-down" color="#306eff" size="14"></u-icon>
        </view>
      </view>
    </view>
    <view class="nocontent" v-else> 暂无评论 </view>

    <!-- 底部内容 -->
    <!-- zhanweifu -->
    <view style="height: 106rpx"></view>
    <!-- 默认一级评论 -->
    <view class="position_comment flex items">
      <up-input
        type="textarea"
        placeholder="说点什么..."
        maxlength="500"
        auto-height
        shape="circle"
        color="#7f7f7f"
        fontSize="28rpx"
        border="surround"
        v-model="replyInfo.msg"
        autoBlur="true"
        :focus="isFocus"
        @focus="focusMsg"
        @blur="blurMsg"
      ></up-input>
      <!-- <u-input type="textarea" height="52" placeholder="说点什么" auto-height v-model="main_content" :focus="true" maxlength="500" /> -->

      <up-button
        class="up_button"
        type="primary"
        shape="circle"
        width="136"
        text="发送"
        @click="confirmMsg"
      ></up-button>
    </view>
  </view>
</template>

<script setup>
import { homeApi } from "../../api/home";
import { userApi } from "../../api";
//获取数据
onLoad((options) => {
  console.log("数据", options);
  id.value = options.id;
  getDetail(id.value);
});
onShow(() => {
  //调用一级接口
  getCommentList();
  uni.pageScrollTo({
    scrollTop: 1, //距离页面顶部的距离
    duration: 0 // 滚动动画时长
  });
});
const uuid = ref(uni.getStorageSync("uuid"));
console.log("uuid", uuid);

const sectionRef = ref();
const clientHeight = ref(0);
const luntanText = ref(false);
const higherAction = () => {
  nextTick(() => {
    uni
      .createSelectorQuery()
      .select(".contentList")
      .boundingClientRect((data) => {
        console.log("data", data.height);
        if (data.height >=160) {
          luntanText.value = true;
        }
      })
      .exec();
    // clientHeight.value = sectionRef.value.$el.clientHeight;
    // if (clientHeight.value > 80) {
    //   luntanText.value = true;
    // }
  });
  // height += 50;
  // sectionRef.value.style = `height: ${height}px`;
  // getCommentList();
};
//关注
const myFocus = () => {
  userApi
    .followFocus({
      user_id: forumDetailList.value.user_id
    })
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        return;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        forumDetailList.is_follow = res.data.boolean ? 1 : 0;
        getDetail(id.value);
      }
    })
    .catch((err) => {
      console.log("err", err);
      uni.showToast({
        title: "请不要重复提交",
        icon: "none"
      });
    });
};

//点赞
const myCancelgoodList = () => {
  let cancelgoodsType = {
    type: 1, //1是论坛 2是评论
    id: id.value
  };
  userApi
    .cancelgoods(cancelgoodsType)
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        return;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        //红色心心
        forumDetailList.is_goods = res.data.boolean ? 1 : 0;
        getDetail(id.value);
      }
    })
    .catch((err) => {
      uni.showToast({
        title: "请不要重复提交",
        icon: "none"
      });
    });
};
//收藏
const myShoucangEdit = () => {
  userApi
    .cancelcollect({
      id: id.value
    })
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        return;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        forumDetailList.is_collect = res.data.boolean ? 1 : 0;
        getDetail(id.value);
      }

      // indexListData.value.forEach((item) => {
      //   if (item.id === id) {
      //     item.is_collect = res.data.boolean ? 1 : 0;
      //     item.collect_num = res.data.num;
      //   }
      // });
      // indexListData.value = [];
      // getIndexList();
    })
    .catch((err) => {
      uni.showToast({
        title: err.msg,
        icon: "none"
      });
    });
};

//展开更多内容
const openMore = ref("展开更多内容");
const openMpreShow = ref(1);
const openAnd = () => {
  openMore.value = "收起内容";
  openMpreShow.value = 2;
};
const clouseAnd = () => {
  openMore.value = "展开更多内容";
  openMpreShow.value = 1;
};
//

const content = ref("");
const id = ref("");
const forumDetailList = ref({});
const getDetail = (id) => {
  //调接口获取数据
  homeApi
    .forumDetail({
      id: id
    })
    .then((res) => {
      console.log("res", res.data);
      forumDetailList.value = res.data;
      content.value = res.data.descript;
      // console.log("content", content.value);
      higherAction();
    })
    .catch((err) => {});
};
const commentList = ref({
  id: id,
  num: 10,
  page: 1
});
const total = ref(0);
const totalListData = ref([]);
//评论列表 数据一级
const getCommentList = () => {
  // console.log("wwfd", totalListData.value);
  homeApi
    .commentList(commentList.value)
    .then((res) => {
      // console.log("res", res.data.data);
      total.value = res.data.total;
      // totalListData.value = res.data.data;
      // console.log("dwfdwwdef", totalListData.value);
      // totalListData.value = [...totalListData.value, ...res.data.data];
      totalListData.value = commentList.value.page === 1 ? res.data.data : totalListData.value.concat(res.data.data);
      // totalListData.value.forEach((item) => {
      //   item.fold = !item.fold;
      // });
      console.log("wwfd", totalListData.value);
      uni.hideLoading();

      //调用二级评论
      // getMoreComemnt();
    })
    .catch((err) => {
      uni.hideLoading();
    });
};

// 点赞/取消点赞
const myCancelgoods = (id, type) => {
  let cancelgoodsType = {
    type: 2, //1是论坛 2是评论
    id: id
  };
  userApi
    .cancelgoods(cancelgoodsType)
    .then((res) => {
      console.log("点赞", res);
      if (res.code == 1) {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        return;
      }
      //红色心心
      if (type == 1) {
        totalListData.value.forEach((item) => {
          if (item.id == id) {
            item.is_goods = res.data.boolean ? 1 : 0;
            item.goods_num = res.data.num;
            // console.log("item", item);
          }
        });
      } else {
        totalListSecend.value.forEach((item) => {
          if (item.id == id) {
            item.is_goods = res.data.boolean ? 1 : 0;
            item.goods_num = res.data.num;
            // console.log("item", item);
          }
        });
      }

      // commentList.value.page = 1;
      // getCommentList(); //点赞刷新列表
      // getMoreComemnt(); //刷新二级评论
    })
    .catch((err) => {
      uni.showToast({
        title: err.msg,
        icon: "none"
      });
    });
};

const replayInfoList = ref([]);
const replayInfoListShow = ref(false);
//获取二级评论
const moreCommentList = ref({
  id: id,
  pid: "",
  num: 10,
  page: 1
});

//评论数据 二级
const totalListSecend = ref([]);
const totalList = ref(0);
const getMoreComemnt = async (pid) => {
  moreCommentList.value.pid = pid;
  homeApi
    .commentSon(moreCommentList.value)
    .then((res) => {
      console.log("res", res.data.data);
      totalListSecend.value = res.data.data;
      totalList.value = res.data.total; //二级评论
      totalListData.value.forEach((item) => {
        if (item.id == pid) {
          item.son = res.data.data;
          item.fold = !item.fold;
        }
      });
      //二级评论列表
    })
    .catch((err) => {});
};
// 触底触发
// onReachBottom(() => {
//   if (totalList.value > moreCommentList.value.num * moreCommentList.value.page) {
//     moreCommentList.value.page++;
//     // totalListData.value = [];
//     getMoreComemnt();
//     uni.showToast({
//       title: "加载中……",
//       icon: "none",
//       duration: 1000
//     });
//   } else {
//     uni.showToast({
//       title: "没有更多了",
//       icon: "none",
//       duration: 1000
//     });
//     return false;
//   }
// });

// 触底触发
onReachBottom(() => {
  if (total.value > commentList.value.num * commentList.value.page) {
    commentList.value.page++;
    // totalListData.value = [];
    getCommentList();
    uni.showToast({
      title: "加载中……",
      icon: "none",
      duration: 1000
    });
  } else {
    uni.showToast({
      title: "没有更多了",
      icon: "none",
      duration: 1000
    });
    return false;
  }
});

//评论
//一层回复
const replyInfo = ref({
  id: id,
  pid: 0,
  msg: ""
});
const replyInfoType = ref(true);
//默认直接回复
const confirmMsg = () => {
  if (!replyInfoType.value) return;
  replyInfoType.value = false;
  homeApi
    .commentAdd(replyInfo.value)
    .then((res) => {
      replyInfoType.value = true;
      if (res.code == 1) {
        replyInfo.value.msg = "";
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        commentList.value.page = 1;
        // totalListData.value = [];
        replyInfo.value.pid = 0;
        blurMsg();
        getCommentList();
      }
      if (res.code == 0) {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
      }
    })
    .catch((err) => {
      replyInfo.value.pid = 0;
      blurMsg();
    });
};

//发表评论
// const confirm = () => {
//   //二层回复 参数不一样
//   homeApi.commentAdd(replyInfo.value).then((res) => {
//     console.log("success", res.msg);
//     replyInfo.value.msg = "";
//     uni.showToast({
//       title: res.msg,
//       icon: "none"
//     });
//     totalListData.value = [];
//     getCommentList();
//   });
// };

//二层回复
// const replyInfoTwo = ref({
//   id: id,
//   pid: "",
//   msg: ""
// });

// const replyType = ref(1);

//一级评论
const type = ref(0);
const isFocus = ref(false);
const reply = (pid, type) => {
  //如果type==1 是二级回复 type==0 是一级回复
  if (type == 1) {
    replyInfo.value.pid = pid;
  } else {
    replyInfo.value.pid = 0;
  }
  focusMsg();
};
//获取焦点  
const focusMsg = (e) => {
  console.log("e1", e);
  isFocus.value = true;
};
//失去焦点的时候
const blurMsg = (e) => {
  console.log("e2", e);
  isFocus.value = false;
};
//二级回复

// const replyTwo = (pid) => {
//   focus();
//   console.log("二级评论",pid);
//   replyInfo.value.pid = pid;
//   replyType.value = 2;
// };

const focus = () => {
  isFocus.value = true;
};

//展开
const isOpen = ref(1);
const openText = () => {
  isOpen.value = 2;
  console.log("111", isOpen.value);
};

const shadowStyle = ref({
  backgroundImage: "none"
  //   paddingTop: "0",
  //   marginTop: "20rpx"
});
</script>

<style lang="scss" scoped>
page {
  background: #f5f5f5;
}
:deep(.u-border) {
  background-color: #f5f5f5;
}
.moreComment {
  // border: 1rpx solid green;
  color: #306eff;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seek {
  border-radius: 0px 0px 0px 0px;
  // height: 100%;
  background: #f5f5f5;
  width: 100%;
  box-sizing: border-box;
}

.seek_detail {
  border-radius: 0px 0px 0px 0px;
  // height: 100%;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 22rpx 32rpx;
  // border: 1rpx solid red;

  .tittle {
    // height: 44rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    line-height: 44rpx;
    // text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    position: relative;

    .sc {
      position: absolute;
      width: 48rpx;
      height: 48rpx;
      // margin-left: 200rpx;
      right: 0;
      bottom: 0;

      image {
        height: 100%;
        width: 100%;
      }
    }
  }

  .tips {
    margin: 20rpx 0;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    flex-direction: column;
    .tipsInfo {
      margin: 0rpx 24rpx;
    }
  }

  .photos {
    // height: 320rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    image {
      // height: 320rpx;
      // height: 400px;
      width: 100%;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-bottom: 20rpx;
    }
  }

  .textInfo {
    // border: 1px solid red;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
  }

  .contentList {
    // height: 320rpx;
    // border: 1rpx solid red;
  }

  .oncontentList {
    height: 100%;
  }

  .publishTime {
    margin: 24rpx 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 48rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.38);
    line-height: 48rpx;
  }

  .publishinfo {
    box-sizing: border-box;
    height: 164rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    // border: 1px solid red;
    padding: 24rpx 0rpx;

    .publishinfo_top {
      height: 66rpx;
      border-radius: 0rpx 0rpx 0rpx 0rpx;

      .publish_left {
        display: flex;
        align-items: center;

        image {
          width: 56rpx;
          height: 56rpx;
          border-radius: 50%;
          opacity: 1;
        }

        span {
          font-size: 32rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.87);
          margin-left: 12rpx;
        }
      }

      .publish_right {
        width: 136rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        opacity: 1;
        border: 2rpx solid #306eff;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #306eff;
      }
      .publish_right_no{
        width: 136rpx;
        height: 56rpx;
        line-height: 56rpx;
        background: #306EFF;
        text-align: center;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;

      }
    }

    .publishinfo_bottom {
      height: 48rpx;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 1;
      width: 100%;
      margin-top: 25rpx;

      .publish_left {
        display: flex;
        align-items: center;
        image {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          opacity: 1;
        }

        span {
          font-size: 32rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.87);
          margin-left: 12rpx;
        }
      }
    }
  }
}

.comment {
  height: 80rpx;
  line-height: 80rpx;
  background: #f5f5f5;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  padding-left: 32rpx;
}

.comment_list {
  // width: 100%;
  // height: 100%;
  padding: 0rpx 32rpx;
  box-sizing: border-box;
  background-color: #fff;
  // border: 1px solid red;
  padding-bottom: 20rpx;

  .replay {
    margin-left: 80rpx;
  }

  .publishinfo_top {
    height: 76rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    // width: 100%;
    // border: 1px solid red;
    .publish_left {
      display: flex;
      align-items: center;

      image {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
        opacity: 1;
      }

      span {
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.87);
        margin-left: 12rpx;
      }
    }

    .publish_right {
      // width: 136rpx;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      font-size: 22rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
    }
  }
  .comment_text {
      display: flex;
      flex-wrap: wrap !important;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      margin-top: 16rpx;
    }

  .comment_text_info {
    padding-left: 80rpx;
    // box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .comment_ansoner {
      margin-top: 20rpx;

      .huifu {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #306eff;
      }

      .dianzan {
        image {
          width: 48rpx;
          height: 48rpx;
        }

        span {
          font-size: 28rpx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.87);
        }
      }
    }
  }
}

// .comment_list:last-child{
//   margin-bottom: 160rpx;
// }
.position_comment {
  margin-top: 106rpx;
  box-sizing: border-box;
  // padding-top: 106rpx;
  height: 106rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  position: fixed;
  z-index: 888;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 18rpx 32rpx;

  .up_button {
    width: 136rpx;
    height: 74rpx;
    background: #306eff;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #ffffff;
    margin-left: 16rpx;
  }
}
</style>
